<template>
    <section>
        <DetailsHeader title="提现" class="mb-24" />

        <div class="card">
            <div class="card-header" style="margin-bottom:12px;">
                <span class="card-title">可提现金额</span>
            </div>

            <div class="card-content">
                <div class="card-con-lf">
                    <span class="col-money">￥</span>
                    <a-statistic :value="accountInfo.withdrawAmount" :precision="2" :value-style="{ color: '#FF3D00' }">

                    </a-statistic>
                </div>
                <div class="card-con-rg">
                    <div>
                        <span class="col-8A93A7 fz-14 mr-8">=总充值金额-总使用金额（包括代金券）</span>
                        <span class="fz-14"><info-circle-filled
                                style="margin-right: 5px;" />已开票金额无法提现</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" style="margin-bottom:24px;">
                <span class="card-title">提现记录</span>

                <div class="card-opt">
                    <span class="fz-12 mr-16" style="color: #FF2452;"><exclamation-circle-filled
                            style="margin-right: 5px;" />申请提现需关闭所有实例并清空数据，所有数据无法恢复</span>
                    <a-button type="primary" class="card-opt" @click="handleAdd" >申请提现</a-button>
                </div>
            </div>

            <div class="page-content">
                <a-table :dataSource="tableList">
                    <a-table-column key="createdAt" title="申请时间" data-index="createdAt" />
                    <a-table-column key="amount" title="提现金额（元）" data-index="amount" />
                    <a-table-column key="actualAmount" title="到账金额（元）" data-index="actualAmount" />
                    <a-table-column key="balanceAmount" title="账户余额（元）" data-index="balanceAmount" />
                    <a-table-column key="completeTime" title="到账时间" data-index="completeTime" />
                    <a-table-column key="auditStatus" title="状态" data-index="auditStatus">
                        <template #default="{ record }">
                            {{ selectDictLabel(auditStatusEnum, record?.auditStatus) }}
                        </template>
                    </a-table-column>
                    <a-table-column key="comment" title="说明" data-index="comment" />
                </a-table>
            </div>
        </div>

        <!-- 申请提现 -->
        <a-modal v-model:visible="modalVisible" title="申请提现" @ok="handleOk">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="title" label="提现金额" style="margin-bottom: 8px;">
                    <span>￥ {{ accountInfo.withdrawAmount }}</span>
                </a-form-item>
                <a-form-item name="idCode" label="退款途径" style="margin-bottom: 8px;">
                    <span>原充值渠道</span>
                </a-form-item>
                <a-form-item name="bankName" style="margin-bottom: 8px;">
                    <span class="fz-12 col-8A93A7">退款申请将在下个月10日统一处理，按原充值渠道退回，请耐心等待</span>
                </a-form-item>
                <a-form-item name="bankAccount" style="margin-bottom: 8px;">
                    <span style="color: #FF2452;" class="fz-12">! 注意：一旦提交，系统将 清空
                        账户下的余额以及代金券。请确保已关闭所有实例，并已清空所有数据，所有数据无法恢复</span>
                </a-form-item>
            </a-form>
        </a-modal>
    </section>
</template>
<script setup>
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getWithdrawListApi, applyWithdraw } from 'api/modules/api.cost'
import {
    InfoCircleFilled,
    ExclamationCircleFilled
} from '@ant-design/icons-vue';
import { XsyMessage } from '@/libs/util.toast'
import userInfoStore from '@/stores/userInfo.js'
import { storeToRefs } from 'pinia'
import { selectDictLabel } from '@/libs/util.common'

const useUserInfoStore = userInfoStore()
const { accountInfo } = storeToRefs(useUserInfoStore);

const tableList = ref([])
const queryParams = ref({
    pn: 1,
    ps: 10
})

// 申请提现
const form = ref({})
const modalVisible = ref(false)
const handleAdd = () => {
    modalVisible.value = true
}

const formRef = ref();
const handleOk = () => {
    applyWithdraw().then((res) => {
        if (res.code == 0) {
            XsyMessage.success('提现成功');
            modalVisible.value = false
            getList()
        }
    })
}

const getList = () => {
    getWithdrawListApi(queryParams.value).then(res => {
        tableList.value = res.data.list
    })
};

getList()

const auditStatusEnum = [
    {
        label: '待审核',
        value: '1'
    },
    {
        label: '财务确认',
        value: '2'
    },
    {
        label: '完成',
        value: '3',
    },
    {
        label: '驳回',
        value: '4',
    }
]

</script>

<style scoped lang="scss">
.card {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 4px 0px #E7EDF8;

    .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .card-title {
            font-weight: 550;
            color: #223354;
            margin-right: 20px;
        }

        .card-opt {
            margin-left: auto;
        }
    }

    .card-content {
        display: flex;
        align-items: center;

        .card-con-lf {
            display: flex;
            align-items: center;
            margin-right: 24px;
        }
    }
}</style>